<template>
  <view class="apply-wrapper inner-wrapper">
    <view v-if="groupList.length > 0" class="apply-block-list">
      <view v-for="(group, index) in groupList" :key="index" class="apply-block">
        <view v-if="group.approFlowList.length > 0" class="apply-title">{{ group.groupName }}</view>
        <view v-if="group.approFlowList.length > 0" class="apply-box">
          <view v-for="(flow, idx) in group.approFlowList" :key="idx" class="apply-box-item">
            <view class="apply-box-item-inner" @tap="onFlowTap(flow.id)">
              <img :src="flow.icon" alt="">
              <view class="typename">{{ flow.typeName }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-else-if="!loading" style="width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: cneter;">
      <img style="width: 200px; height: 200px; margin: 0 auto;" src="/approval/img/meiyou_jilu.png">
      <view style="margin-top: 20px; color: #999; text-align: center;">没有记录，请在管理后台添加</view>
    </view>
    <view class="tab-placeholder" />
  </view>
</template>
<script>
import { loadApprovalsReq } from '@/services/employee'
export default {
  name: '',
  components: {},
  props: {},
  data(){
    return {
      groupList: [],
      loading: true
    }
  },
  computed: {},
  watch: {},
  created(){},
  mounted(){
    this.loadApprovals()
  },
  methods: {
    loadApprovals(){
      loadApprovalsReq().then(res => {
        this.groupList = res
        this.loading = false
      }).catch(err => {
        this.loading = false
        uni.showToast({
          title: err.message,
          icon: 'none',
          duration: 2000
        })
      })
    },
    onFlowTap(id){
      uni.navigateTo({
        url: `/approval/createForm?id=${id}`
      })
    }
  }
}
</script>
